<template>
	<div>
		<div class="background">
		<img :src="imgSrc" width="100%" height="100%" alt="" />
		</div>	
		<div class="text"><h1>生鲜菜购后台管理系统</h1></div>
		<div class="login">
			<el-row :gutter="20">
				<el-col :span="8" :offset="8">
					<el-form ref="form" :model="user" label-width="80px">
						<el-form-item label="账号">
							<el-input v-model="user.userName" autocomplete="off" style="width: 300px"></el-input>
						</el-form-item>
						<el-form-item label="密码" label-width="80px">
							<el-input placeholder="请输入密码" v-model="user.userPassword"
							 show-password  autocomplete="off" style="width: 300px"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="login">登录</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: 'login',
		data() {
			return {
				imgSrc: require('./菜购生鲜.jpg'),
				user: {
					userName: "tom",
					userPassword: "123"
				}
			}
		},
		methods: {
			login() {
				axios.post("/loginAPI/auth/login", this.user)
					.then(res => {
						if (res.data.code == 200) {
							this.$message({
								message: "登录成功",
								type: "success"
							})
							this.$router.push("/");
							localStorage.setItem("token", res.data.data);
						} else if (res.data.code == 404) {
							this.$message({
								message: "账号或密码不正确",
								type: "error"
							})
						}
					})
			}
		},
		components: {

		}
	}
</script>

<style>
	.background {
		width: 100%;
		height: 100%;
		z-index: -1;
		position: absolute;
	}
	.login {
		margin-left: 80px;
		margin-top: 300px;
		z-index: 1;
		position: absolute;
	}
	.text{
		margin-left: 250px;
		margin-top: 150px;
		z-index: 10;
		position: absolute;
	}
</style>